<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 概念: 基于现有数据,计算出新的属性,依赖数据的变化,自动重新计算 -->
    <!-- 语法:
        1.声明 computed 配置项中, 一个计算属性对应一个函数
        2.使用起来和普通属性一样使用 {{ 计算属性名 }}
    -->
    <div id="app">
        <table>
            <tr>
                <th>名字</th>
                <th>数量</th>
            </tr>
            <tr v-for="(item, index) in list" :key="item.id">
                <td>{{ item.name }}</td>
                <td>{{ item.num }}个</td>
            </tr>
        </table>

        <p>礼物总数: {{ totalCount }} 个</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                list: [
                    {id: 1, name: "篮球", num: 1},
                    {id: 2, name: "玩具", num: 2},
                    {id: 3, name: "铅笔", num: 5},
                ]
            },
            methods: {
                
            },
            computed: {
                totalCount (){
                    // 对 list 数组进行求和
                    let res = this.list.reduce((sum, item) => sum + item.num, 0)
                    return res
                }
            }
        })
    </script>
</body>
</html>